<template>
	<view class="page">
		<view class="info_box" style="padding-bottom: 40rpx;">
			<view class="info_box_base">
				<view class="info_box_base_title" style="font-weight: bold;">施工技术及安全</view>
				<view class="info_box_base_item" @click="openRead1">施工技术交底文件：
					<u-checkbox disabled :checked="isCheck2" size="13" labelSize="13" label=""></u-checkbox><text
						class="down_link">点此查看 (阅读{{djsTitle}}s后确认)</text>
				</view>
				<view class="info_box_base_item" @click="openRead">施工安全交底文件：
					<u-checkbox disabled :checked="isCheck1" size="13" labelSize="13" label=""></u-checkbox> <text
						class="down_link">点此查看 (阅读{{djsTitle}}s后确认)</text>
				</view>

				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">安全防护用品佩戴（工装/安全帽/安全带/绝缘手套）</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList1" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
					</view>
				</view>
			</view>

			<view class="info_box_base">
				<view class="info_box_base_title" style="font-weight: bold;">安装工艺照片</view>
				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">室外接收天线：</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList2" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="2" multiple :maxCount="10"></u-upload>
					</view>
				</view>

				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">接收设备：</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList3" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="3" multiple :maxCount="10"></u-upload>
					</view>
				</view>

				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">覆盖设备：</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList4" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="4" multiple :maxCount="10"></u-upload>
					</view>
				</view>

				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">扩展设备4口：</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList5" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="5" multiple :maxCount="10"></u-upload>
					</view>
				</view>
				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">扩展设备8口：</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList6" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="6" multiple :maxCount="10"></u-upload>
					</view>
				</view>
				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">电源接入点位：</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList7" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="7" multiple :maxCount="10"></u-upload>
					</view>
				</view>
				<view class="gcxt_b_wy_reason">
					<text sty>其他说明：</text>
					<u--input placeholder="请输入具体说明" v-model="params.otherinstructions" border="bottom"></u--input>
				</view>
			</view>

			<!-- 施工安全交底文件 -->
			<u-popup :show="showAq" mode="center">
				<view class="sg_file_box">
					<u-parse :content="contentFile"></u-parse>
					
				</view>
				<view class="sg_file_box_time" style="background-color:rgb(70, 179, 255);color: #fff;" @click="yjRead" v-if="isbtn">我已阅读</view>
				<view  v-if="!isbtn">
					 <u-count-down @change="onChangeDjs" :time="djs" format="ss">
					 	<view class="sg_file_box_time">阅读剩余时间
					 		{{timeData.seconds }}s
					 	</view>
					 </u-count-down>
				</view>
				
			</u-popup>
			
			<u-popup :show="showAqJs" mode="center">
				<view class="sg_file_box">
					<u-parse :content="contentFileJs"></u-parse>
					
				</view>
				<view class="sg_file_box_time" @click="yjRead1" style="background-color:  rgb(70, 179, 255);color: #fff" v-if="isbtn1">我已阅读</view>
				<u-count-down @change="onChangeDjsJs" :time="djs" format="ss" v-if="!isbtn1">
					<view class="sg_file_box_time">阅读剩余时间
						{{timeDataJs.seconds }}s
					</view>
				</u-count-down>
			</u-popup>


			<view class="btn" @click="next">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		api,
		apiBaseUrl,
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				isbtn:false,
				isbtn1:false,
				isCheck1: false,
				isCheck2: false,
				djs: 30,
				djsTitle: 0,
				timeData: {},
				timeDataJs: {},
				showAq: false,
				contentFile: '',

				showAqJs: false,
				contentFileJs: '',
				timer1: null,
				id: '',
				params: {
					construction_documents: 1,
					construction_safety_documents: 1,
					wearing_safetyequipment: '',
					outdoorreceiving_antenna: '',
					receivingdevice: '',
					coveragedevice: '',
					expansion_devicewith4ports: '',
					expansion_devicewith8ports: '',
					poweraccess_pointlocation: '',

					otherinstructions: ''
				},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
				fileList6: [],
				fileList7: []
			}
		},
		components: {},
		filters: {},
		mounted() {},
		onLoad(e) {
			
			this.id = e.id
			this.lookInfo()
		},
		onShow() {
			this.getDjs()
		},
		onPageScroll(e) {},
		beforeDestroy() {},
		methods: {
			onChangeDjs(e) {
				this.timeData = e
				if (e.seconds <= 0) {
					this.isbtn = true
				}
			},
			yjRead1(){
				this.showAqJs = false
				this.params.construction_documents = 2
				this.isCheck2 = true
			},
			yjRead(){
				this.showAq = false
				this.params.construction_safety_documents = 2
				this.isCheck1 = true
			},
			onChangeDjsJs(e) {
				this.timeDataJs = e
				if (e.seconds <= 0) {
					this.isbtn1 = true
				}
			},
			getDjs() {
				api.post('/api/shop/sysconfigdata', {
					type: 3
				}).then(res => {
					let rstt = res.data
					if (rstt.code == 1) {
						this.djs = rstt.data * 1000
						this.djsTitle = rstt.data
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			//施工技术
			getSgJdFile1() {
				uni.showLoading({})
				api.post('/api/shop/sysconfigdata', {
					type: 1
				}).then(res => {
					let rstt = res.data
					uni.hideLoading()
					if (rstt.code == 1) {
						this.showAqJs = true
						this.contentFileJs = rstt.data
					} else {
						uni.$u.toast(rstt.msg)
					}

				}).catch(err => {
					uni.hideLoading()
				})
			},
			//施工安全交底文件
			getSgJdFile() {
				uni.showLoading({})
				api.post('/api/shop/sysconfigdata', {
					type: 2
				}).then(res => {
					let rstt = res.data
					uni.hideLoading()
					if (rstt.code == 1) {
						this.showAq = true
						this.contentFile = rstt.data
					} else {
						uni.$u.toast(rstt.msg)
					}

				}).catch(err => {
					uni.hideLoading()
				})
			},
			//施工技术
			openRead1() {
				this.getSgJdFile1(1)
			},
			//施工安全
			openRead() {
				this.getSgJdFile(2)
			},

			next() {
				if (this.params.construction_documents == 1) {
					uni.$u.toast("请先阅读施工技术交底文件")
					return;
				}
				if (this.params.construction_safety_documents == 1) {
					uni.$u.toast("请先阅读施工安全交底文件")
					return;
				}

				let rst = this.params
				rst.wearing_safetyequipment = this.fileList1 ? this.fileList1.map(item => item.url).join(',') : [];
				rst.outdoorreceiving_antenna = this.fileList2 ? this.fileList2.map(item => item.url).join(',') : [];
				rst.receivingdevice = this.fileList3 ? this.fileList3.map(item => item.url).join(',') : [];
				rst.coveragedevice = this.fileList4 ? this.fileList4.map(item => item.url).join(',') : [];
				rst.expansion_devicewith4ports = this.fileList5 ? this.fileList5.map(item => item.url).join(',') : [];
				rst.expansion_devicewith8ports = this.fileList6 ? this.fileList6.map(item => item.url).join(',') : [];
				rst.poweraccess_pointlocation = this.fileList7 ? this.fileList7.map(item => item.url).join(',') : [];

				uni.showLoading({})
				api.post('/api/shop/submit_installaandconstruc', {
					...rst,
					type: 1,
					engin_id: this.id
				}).then(res => {
					let rstt = res.data
					uni.hideLoading()
					
					if (rstt.code == 1) {
						uni.navigateTo({
							url: '/pages/gcaz/fghcs?id=' + this.id
						})
					} else {
						uni.$u.toast(rstt.msg)
					}

				}).catch(err => {
					uni.hideLoading()
				})


			},
			lookInfo() {
				uni.showLoading({})
				api.post('/api/shop/submit_installaandconstruc', {
					engin_id: this.id,
					type: 2
				}).then(res => {
					let rst = res.data
					uni.hideLoading()
					if (rst.code == 1) {
						if (rst.data) {
							this.params = rst.data
							let temp_1 = []
							rst.data.wearing_safetyequipment = rst.data.wearing_safetyequipment ? rst.data
								.wearing_safetyequipment : []
							rst.data.wearing_safetyequipment.forEach((item, index) => {
								temp_1.push({
									url: item
								})
							})
							this.fileList1 = temp_1

							let temp_2 = []
							rst.data.outdoorreceiving_antenna = rst.data.outdoorreceiving_antenna ? rst.data
								.outdoorreceiving_antenna : []
							rst.data.outdoorreceiving_antenna.forEach((item, index) => {
								temp_2.push({
									url: item
								})
							})
							this.fileList2 = temp_2

							let temp_3 = []
							rst.data.receivingdevice = rst.data.receivingdevice ? rst.data.receivingdevice : []
							rst.data.receivingdevice.forEach((item, index) => {
								temp_3.push({
									url: item
								})
							})
							this.fileList3 = temp_3

							let temp_4 = []
							rst.data.coveragedevice = rst.data.coveragedevice ? rst.data.coveragedevice : []
							rst.data.coveragedevice.forEach((item, index) => {
								temp_4.push({
									url: item
								})
							})
							this.fileList4 = temp_4

							let temp_5 = []
							rst.data.expansion_devicewith4ports = rst.data.expansion_devicewith4ports ? rst.data
								.expansion_devicewith4ports : []
							rst.data.expansion_devicewith4ports.forEach((item, index) => {
								temp_5.push({
									url: item
								})
							})
							this.fileList5 = temp_5

							let temp_6 = []
							rst.data.expansion_devicewith8ports = rst.data.expansion_devicewith8ports ? rst.data
								.expansion_devicewith8ports : []
							rst.data.expansion_devicewith8ports.forEach((item, index) => {
								temp_6.push({
									url: item
								})
							})
							this.fileList6 = temp_6

							let temp_7 = []
							rst.data.poweraccess_pointlocation = rst.data.poweraccess_pointlocation ? rst.data
								.poweraccess_pointlocation : []
							rst.data.poweraccess_pointlocation.forEach((item, index) => {
								temp_7.push({
									url: item
								})
							})
							this.fileList7 = temp_7

							this.params.construction_safety_documents = 1
							this.params.construction_documents = 1
						}

					}

				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: apiBaseUrl + '/api/shop/upload',
						filePath: url,
						name: 'file',
						header: {
							'method': "xj_user",
							'token': uni.getStorageSync('token')
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								let rst = JSON.parse(res.data)
								if (rst.code == 1) {
									resolve(rst.data)
								} else {
									uni.$u.toast(rst.msg)
									this.deletePic(event)
								}
							}, 500)
						}
					});
				})
			},
		}
	};
</script>

<style scoped>
	.sg_file_box_time {
		position: absolute;
		bottom: 0;
		background-color: #eee;
		width: 710rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
	}

	.sg_file_box {
		width: 710rpx;
		max-height: 85vh;
		background-color: #fff;
		padding: 40rpx;
		overflow: auto;
		padding-bottom: 100rpx;
		/* position: relative; */
	}

	.down_link {
		color: rgb(11, 125, 218);
		font-size: 25rpx;
	}

	.btn {
		width: 500rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: rgb(70, 179, 255);
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	::v-deep .uni-input-input {
		font-size: 26rpx;
	}

	::v-deep .uni-input-placeholder {
		font-size: 26rpx;
	}

	.info_box_base_item_img_title {
		font-size: 25rpx;
		margin: 20rpx 0;
	}

	.gcxt_b_wy_reason {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.gcxt_b_wy {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20rpx 0;
	}

	.info_box_base {
		border: 1px solid rgb(235, 229, 229);
		padding: 20rpx;
		font-size: 25rpx;
		margin-top: 20rpx;
	}

	.info_box_base_item {
		line-height: 45rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.info_box {
		width: 710rpx;
		margin: 0 auto;

	}

	page {
		background-color: #fff;
	}
</style>